import React, { useEffect, useCallback } from "react";
import { connect } from "react-redux";

import * as css from "./css/withdraw-list";
import * as Action from "store/withdraw-list/action";
import * as Api from "api/api";
import { Modal, message } from "antd";
import WithdrawStatus from "enum/WithdrawStatus";
import ShowDate from "utils/ShowDate";

function WithdrawList(props) {
  const { withdrawList, action } = props;
  const {
    page,
    totalNum,
    list,
    name,
    account,
    startDate,
    endDate,
    loading
  } = withdrawList;

  const fetchList = useCallback(
    (name, account, startDate, endDate) => {
      action.fetchList({
        pageSize: page.size,
        pageNum: page.num,
        name,
        account,
        startDate,
        endDate
      });
    },
    [action, page.num, page.size]
  );

  useEffect(() => {
    fetchList();
  }, [fetchList]);

  function onPageChange(page) {
    action.setPageNum(page);
  }

  function indexColumn(text, record, index) {
    let num = index + 1 + (page.num - 1) * page.size;
    return num;
  }

  function timeColumn(text, record, index) {
    return ShowDate(new Date(record.time));
  }

  function statusColumn(text, record, index) {
    let color;
    let label = WithdrawStatus.getByValue(record.status).label;
    if (record.status === WithdrawStatus.INIT.value) {
      color = "blue";
    } else if (record.status === WithdrawStatus.COMPLETE.value) {
      color = "green";
    }

    return <css.Tag color={color}>{label}</css.Tag>;
  }

  function handleColumn(text, record, index) {
    const onClick = () => {
      if (record.status !== WithdrawStatus.INIT.value) {
        return;
      }

      Modal.confirm({
        content: "确定已经转账成功？",
        okText: "确定",
        cancelText: "返回",
        closable: false,
        keyboard: false,
        maskClosable: false,
        onOk: async () => {
          const res = await Api.withdraw({
            id: record.id,
            status: WithdrawStatus.COMPLETE.value
          });

          if (res.status === 200) {
            message.success("提现成功");
            fetchList();
          }
        }
      });
    };

    if (record.status === WithdrawStatus.INIT.value) {
      return (
        <css.WithdrawButton type="primary" onClick={onClick}>
          确认提现
        </css.WithdrawButton>
      );
    }
  }

  function onNameChange(e) {
    action.setName(e.currentTarget.value);
  }

  function onAccountChange(e) {
    action.setAccount(e.currentTarget.value);
  }

  function onDateChange(date, dateString) {
    let startDate = new Date(dateString[0]);
    let endDate = new Date(dateString[1]);

    action.setStartDate(startDate.getTime());
    action.setEndDate(endDate.getTime());
  }

  function onSearch() {
    fetchList(name, account, startDate, endDate);
  }

  return (
    <css.WithdrawList>
      {/* search */}
      <css.Search>
        <css.SearchLabel>支付宝名称</css.SearchLabel>
        <css.SearchInput value={name} onChange={onNameChange} allowClear />
        <css.SearchLabel>支付宝账户</css.SearchLabel>
        <css.SearchInput
          value={account}
          onChange={onAccountChange}
          allowClear
        />
        <css.SearchLabel>时间</css.SearchLabel>
        <css.SearchDate onChange={onDateChange} />
        <css.SearchButton type="primary" onClick={onSearch}>
          搜索
        </css.SearchButton>
      </css.Search>
      {/* table */}
      <css.Table
        dataSource={list}
        bordered
        pagination={false}
        loading={loading}
      >
        <css.Column
          key="index"
          title="#"
          render={indexColumn}
          align="center"
          width={50}
        />
        <css.Column
          key="zfbName"
          title="支付宝用户名"
          dataIndex="zfbName"
          align="center"
        />
        <css.Column
          key="telNumber"
          title="支付宝账号"
          dataIndex="telNumber"
          align="center"
        />
        <css.Column key="pid" title="推广为id" dataIndex="pid" align="center" />
        <css.Column key="money" title="价钱" dataIndex="money" align="center" />
        <css.Column
          key="time"
          title="时间"
          dataIndex="time"
          align="center"
          render={timeColumn}
        />
        <css.Column
          key="status"
          title="状态"
          dataIndex="status"
          align="center"
          render={statusColumn}
        />
        <css.Column
          key="handle"
          title="操作"
          align="center"
          render={handleColumn}
        />
      </css.Table>
      {/* pagnation */}
      <css.Pagination
        current={page.num}
        pageSize={page.size}
        total={totalNum}
        onChange={onPageChange}
      />
    </css.WithdrawList>
  );
}

export default connect(
  state => {
    const { withdrawList } = state;

    return {
      withdrawList
    };
  },
  f => ({
    action: {
      setPageSize() {
        f(Action.setPageSize(...arguments));
      },
      setPageNum() {
        f(Action.setPageNum(...arguments));
      },
      fetchList() {
        f(Action.fetchList(...arguments));
      },
      setName() {
        f(Action.setName(...arguments));
      },
      setAccount() {
        f(Action.setAccount(...arguments));
      },
      setStartDate() {
        f(Action.setStartDate(...arguments));
      },
      setEndDate() {
        f(Action.setEndDate(...arguments));
      }
    }
  })
)(WithdrawList);
